<template>
    <div class="show">
        <el-row>
            <el-col :md="20">
                <el-button type="primary" @click="handleClose">
                    更新物联卡信息
                </el-button>
                <el-button type="primary" @click="dialogVisible1 = true">
                    达量断网设置
                </el-button>
                <el-button type="primary" @click="handle1Close">
                    断网
                </el-button>
                <el-button type="primary" @click="dialogVisible2 = true">
                    套餐订购退订
                </el-button>
                <el-button type="primary" @click="dialogVisible3 = true">
                    流量预警设置
                </el-button>
            </el-col>
            <el-col :md="4" class="float-right">
                <el-button type="primary">
                    <i class="el-icon-refresh"></i>
                </el-button>
            </el-col>
            <el-dialog title="达量断网设置" :visible.sync="dialogVisible1" width="40%">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
                    <el-form-item label="达量断网操作：">
                        <el-radio-group v-model="ruleForm.radio1">
                            <el-radio :label="3">修改</el-radio>
                            <el-radio :label="6">取消</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="断网类型：">
                        <el-radio-group v-model="ruleForm.radio2">
                            <el-radio :label="3">用户级</el-radio>
                            <el-radio :label="6">套餐级</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="断网阀值：" prop="price">
                        <el-input type="number"  v-model="ruleForm.price" auto-complete="off" placeholder="单位M"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </span>
            </el-dialog>
            <el-dialog title="套餐订购退订" :visible.sync="dialogVisible2" width="40%">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
                    <el-form-item label="套餐订购退订：">
                        <el-radio-group v-model="ruleForm.radio3">
                            <el-radio :label="3">订购</el-radio>
                            <el-radio :label="6">退订</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="套餐：" prop="value1">
                        <el-select v-model="ruleForm.value1" filterable placeholder="请选择" class="w100">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </span>
            </el-dialog>
            <el-dialog title="流量预警设置" :visible.sync="dialogVisible3" width="40%">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
                    <el-form-item label="流量预警比例值：" prop="value2">
                        <el-select v-model="ruleForm.value2" filterable placeholder="请选择" class="w100">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </span>
            </el-dialog>
        </el-row>
        <div class="card-box card-box-col" style="margin: 10px 0px;">
            <el-row>
                <el-col :md="3">
                    ICCID：
                </el-col>
                <el-col :md="5">
                    8986031630200231575
                </el-col>
                <el-col :md="3">
                    开始时间：
                </el-col>
                <el-col :md="5">
                    2018-04-27
                </el-col>
                <el-col :md="3">
                    数据更新时间：
                </el-col>
                <el-col :md="5">
                    2018-06-28 11:32:22
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    运营商：
                </el-col>
                <el-col :md="5">
                    上海电信
                </el-col>
                <el-col :md="3">
                    导入时间：
                </el-col>
                <el-col :md="5">
                    2018-04-02 14:38:27
                </el-col>
                <el-col :md="3">
                    当前周期使用流量：
                </el-col>
                <el-col :md="5">
                    0.0 KB
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    运营商账户：
                </el-col>
                <el-col :md="5">
                    吴开来
                </el-col>
                <el-col :md="3">
                    划拨时间：
                </el-col>
                <el-col :md="5">
                    2018-06-26 14:05:38
                </el-col>
                <el-col :md="3">
                    套餐总流量：
                </el-col>
                <el-col :md="5">
                    2.0 KB
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    手机号码：
                </el-col>
                <el-col :md="5">
                    14916126735
                </el-col>
                <el-col :md="3">
                    划拨对象：
                </el-col>
                <el-col :md="5">
                    董金帅分润
                </el-col>
                <el-col :md="3">
                    剩余流量：
                </el-col>
                <el-col :md="5">
                    2.0 KB
                </el-col>
            </el-row>
             <el-row>
                <el-col :md="3">
                    卡类别：
                </el-col>
                <el-col :md="5">
                    单卡
                </el-col>
                <el-col :md="3">
                    运营商状态：
                </el-col>
                <el-col :md="5">
                    停机
                </el-col>
                <el-col :md="3">
                    断网状态：
                </el-col>
                <el-col :md="5">
                    已断
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    测试流量：
                </el-col>
                <el-col :md="5">
                    1111
                </el-col>
                <el-col :md="3">
                    运营商激活时间：
                </el-col>
                <el-col :md="5">
                    2018-04-27
                </el-col>
                <el-col :md="3">
                    达量断网设置：
                </el-col>
                <el-col :md="5">
                    用户级10323MB
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    激活宽限期：
                </el-col>
                <el-col :md="5">
                    1111
                </el-col>
                <el-col :md="3">
                    用户业务模式：
                </el-col>
                <el-col :md="5">
                    月叠加包（分销商-分销商）
                </el-col>
                <el-col :md="3">
                    流量预警设置：
                </el-col>
                <el-col :md="5">
                    40
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    激活时间：
                </el-col>
                <el-col :md="5">
                    2018-06-15 11:00:11
                </el-col>
                <el-col :md="3">
                    卡状态：
                </el-col>
                <el-col :md="5">
                    已激活
                </el-col>
                <el-col :md="3">
                    是否开通短信：
                </el-col>
                <el-col :md="5">
                    否
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="3">
                    预计销卡时间：
                </el-col>
                <el-col :md="5">
                    2018-06-15 11:00:11
                </el-col>
            </el-row>
        </div>
        <el-tabs @tab-click="handleClick" v-model="activeName" class="p15">
            <el-tab-pane v-for="(tab, index) in tabData" :label="tab.label" :name="tab.name" :key="index"></el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabData: [{
                        label: '流量使用详情',
                        name: 'usagedetail'
                    },
                    {
                        label: '短信使用详情',
                        name: 'smsusagedetail'
                    },
                    {
                        label: '套餐详情',
                        name: 'package'
                    },
                    {
                        label: '历史事件',
                        name: 'historyevent'
                    },
                    {
                        label: '实名制认证',
                        name: 'realnamecertification'
                    }
                ],
                activeName: 'usagedetail',
                options1: [
                    {
                       value: '选线-',
                        name: '流量池' 
                    },
                    {
                       value: '选线2',
                        name: '套餐外叠加' 
                    }
                ],
                options2: [
                    {
                       value: '选线-',
                        label: '40%提醒' 
                    },
                    {
                       value: '选线2',
                        label: '80%提醒' 
                    },
                    {
                       value: '选线3',
                        label: '100%提醒' 
                    },
                    {
                       value: '选线4',
                        label: '40,80,100%提醒' 
                    }
                ],
                ruleForm: {
                    radio1: 3,
                    radio2: 3,
                    radio3: 3,
                    price: '',
                    value1: '',
                    value2: ''
                },
                dialogVisible1: false,
                dialogVisible2: false,
                dialogVisible3: false,
                rules: {
                    price: [
                        {
                            required: true,
                            message: '请输入断网阀值',
                            trigger: 'blur'  
                        },
                        {
                            pattern: /^(-1)$|(^([1-9]\d*|[0]{1,1}))$/,
                            message: '达量断网应是-1或0或正整数'
                        }
                    ],
                    value1: [
                        {
                            required: true,
                            message: '请选择套餐',
                            trigger: 'change' 
                        }
                    ],
                    value2: [
                        {
                            required: true,
                            message: '请选择流量预警比例值',
                            trigger: 'change' 
                        }
                    ]
                }
            }
        },
         methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogVisible1 = false
                this.dialogVisible2 = false
                this.dialogVisible3 = false
            },
            handleClose(done) {
                this.$confirm('确认要更新这张卡吗？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            handle1Close(done) {
                this.$confirm('您真的确定给卡断网吗？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            handleClick(tab) {
                var path = '/carrier/' + this.$store.getters.carrier.carrierId + '/sim_cards/'+ this.$store.getters.simcards.id +'/' +  tab.name
                  if (this.activeName=== 'usagedetail') {
                    path = '/carrier/' + this.$store.getters.carrier.carrierId + '/sim_cards/'+ this.$store.getters.simcards.id;
                  }
                  this.$router.push({
                    path: path
                  })
            }
        },
        watch: {
            $route: {
                handler: function(to) {
                    this.tabData.forEach((tab) => {
                        if (tab.name == to.name) {
                        this.activeName = to.name
                        }
                    });
                },
            // 深度观察监听
            deep: true
            }
        }
    }
</script>

<style scoped lang="scss">
    .card-box-col {
        .el-row {
            .el-col {
                font-size: 14px;
                padding: 15px 0px;
            }
            .el-col:nth-of-type(2n + 1) {
                font-weight: bold;
                text-align: right;
            }
            .el-col:nth-of-type(2n) {
                padding-left: 15px;
            }
        }
    }

    .w100 {
        width: 100%;
    }
</style>